<template>
  <el-container>
    <el-main>
      <div>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple" style="text-align: left;">
          <el-radio-group v-model="param.state" @change="loadList">
            <el-radio :label="0">全部</el-radio>
            <el-radio :label="1">发布</el-radio>
            <el-radio :label="2">未发布</el-radio>
          </el-radio-group>
        </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light" style="margin-bottom: 10px;text-align: right;">
          <el-row>
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="goToNewPost">新建</el-button>
          </el-row>
        </div></el-col>
      </el-row>
      <el-table
        :data="tableData"
        v-loading="tableLoading"
        border
        stripe
        @selection-change="handleSelectionChange"
        size="mini"
        style="width: 100%">
        <el-table-column
          type="selection"
          align="left"
          width="30">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题名"
          width="180" >
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <span v-if='scope.row.state == 2' style="padding: 3px 4px 3px 4px;margin: 2px"
                       >未发布
            </span>
            <span v-else  style="padding: 3px 4px 3px 4px;margin: 2px"
                       >已发布
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
          width="180" >

          <template slot-scope="scope">
            <span v-if='scope.row.category_id == 1' style="padding: 3px 4px 3px 4px;margin: 2px">了解专升本
            </span>
            <span v-else-if='scope.row.category_id == 2'  style="padding: 3px 4px 3px 4px;margin: 2px">升本大纲
            </span>
            <span v-else  style="padding: 3px 4px 3px 4px;margin: 2px">经验分享
            </span>
          </template>


        </el-table-column>
        <el-table-column
          prop="ctime"
          :formatter="dateFormat"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="more"
          label="更多">

          <template slot-scope="scope">
            <el-button  style="padding: 3px 4px 3px 4px;margin: 2px" size="mini" icon="el-icon-edit"
                       @click="handleEdit(scope.row)">编辑
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex;justify-content: space-between;margin: 2px">
        <el-pagination
          background
          :page-size="15"
          :current-page="currentPage"
          @current-change="currentChange"
          layout="prev, pager, next"
          :total="totalCount">
        </el-pagination>
      </div>
    </div>

      <div style="display: flex;justify-content: space-between;margin: 2px">
        <el-button type="danger" size="mini" v-if="totalCount>0" :disabled="multipleSelection.count==0"
                   @click="deleteMany">批量删除
        </el-button>
      </div>


      <!-- 从活动库导入 弹出框 -->
    </el-main>
  </el-container>
</template>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>

  export default {

    data() {
      return {
        param: {
          state : 0,
        },
        totalCount: -1,
        currentPage: 1,
        defaultProps: {
          children: 'children',
          label: 'label'
        },

        // 表格数据
        tableData: [],
        tableLoading:false,
        // 导入课程资源-选中课程数组
        multipleSelection:[],


      };
    },
    mounted: function () {
      this.loadList();
    },
    methods: {
      //时间格式化
      dateFormat:function(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },
      currentChange(currentChange){
        this.currentPage = currentChange;
        this.loadList();
      },





      deleteMany(){
        var _this = this;
        this.$confirm('此操作将删除[' + _this.multipleSelection.length + ']条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ids = '';
          for (var i = 0; i < _this.multipleSelection.length; i++) {
            ids += _this.multipleSelection[i].id + ",";
          }
          _this.doDelete(ids);
        }).catch(() => {
        });
      },

      doDelete(ids) {
        var _this = this;
        this.tableLoading = true;
        this.postRequest("/post/list/delete/"+ids).then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.$message({type: data.result, message: data.msg});
            _this.loadList();
          }
        })
      },

      goToNewPost: function() {
        this.$router.push({path:'/post/new'});
      },
      loadList(){
        var _this = this;
        this.tableLoading = true;
        this.postRequest("/post/list/list?state="+_this.param.state+"&page=" + this.currentPage + "&size=15&type=1").then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.tableData = data.data.arrays;

            _this.totalCount = data.data.count;
          }
        })
      },


      handleEdit(row) {
        this.$router.push({path:'/post/edit',query:{
		        post_id:row.id}});
      },
      /*
        mfp
        导入课程资源面板- 获取选择数据
       */
      handleSelectionChange(val){
        this.multipleSelection = val;
      }
    }
  };

</script>
